<template>
    <div class="mt-[100px]">
        <el-tabs v-model="activeName" type="card" class="tabs-box" @tab-click="handleClick">
            <el-tab-pane label="我购买的" name="buy">
                <div v-if="orderList.length">
                    <MovieItem
                        @click.native="gotoDetail(item)"
                        v-for="item in orderList"
                        :name="item.movieName"
                        :img="item.movieImg"
                        :score="item.movieScore"
                        :types="formatTypes(item.movieTypes)"
                    >
                    </MovieItem>
                </div>
                <div v-else>
                    <el-empty description="暂无数据" />
                </div>
            </el-tab-pane>
            
            <el-tab-pane label="我收藏的" name="collect">
                <div v-if="collectList.length">
                    <MovieItem
                        @click.native="gotoDetail(item)"
                        v-for="item in collectList"
                        :name="item.movieName"
                        :img="item.movieImg"
                        :score="item.movieScore"
                        :types="formatTypes(item.movieTypes)"
                    >
                    </MovieItem>
                </div>
                <div v-else>
                    <el-empty description="暂无数据" />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { getMyOrder } from '@/apis/order'
import { getCollectByUser } from '@/apis/movie'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import MovieItem from '@/components/MovieItem.vue'
const router = useRouter()
const checkAll = ref(false)
const orderList = ref([])
const collectList = ref([])
const activeName = ref('buy')
const getList = async () => {
    const res = await getMyOrder({
        pageNum: 1,
        pageSize: 1000
    })
    orderList.value = res.list
}
const getCollectList = async () => {
    const res = await getCollectByUser()
    collectList.value = res.list
}
const gotoDetail = (item) => {
    router.push({
        name: 'MovieDetail',
        query: {
            id: item.movieId
        }
    })
}
onMounted(() => {
    getList()
    getCollectList()
})

const formatTypes = (types) => {
    return types.map((item) => item.typeName)
}
</script>

<style lang="scss" scoped>
.custom-style {
    :deep(.el-textarea__inner) {
        height: 106px;
    }
}
.tabs-box {
    --el-color-primary: #ffffff;
    --el-text-color-primary: #dddddd;
}
</style>
